<script setup lang="ts">
import { AccountBookFilled } from "@ant-design/icons-vue";
import { reactive } from "vue";

const headData = reactive({
  dataSource: [
    { id: 1, label: "今日访问", value: 123456, icon: AccountBookFilled },
    { id: 2, label: "今日访问", value: 123456, icon: AccountBookFilled },
    { id: 3, label: "今日访问", value: 123456, icon: AccountBookFilled },
    { id: 4, label: "今日访问", value: 123456, icon: AccountBookFilled }
  ]
});
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex gap-4">
      <div
        class="rounded bg-white p-4 flex-1 flex items-center gap-4 cursor-pointer transition shadow-sm hover:-translate-y-1"
        v-for="data in headData.dataSource"
        :key="data.id"
      >
        <div class="flex-1">
          <div class="text-gray-500">{{ data.label }}</div>
          <div class="text-2xl text-bold">{{ data.value }}</div>
        </div>
        <div
          class="flex-shrink-0 w-10 h-10 rounded bg-blue-500 text-white flex items-center justify-center text-lg"
        >
          <component :is="data.icon" />
        </div>
      </div>
    </div>
    <div class="flex gap-4">
      <div class="w-2/5 h-96 flex-shrink-0 bg-blue-400 rounded">
        <WebxEchartBar />
      </div>
      <div class="flex-auto h-96 bg-blue-400 rounded">
        <WebxEchartBar />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less"></style>
